<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
    <script src="node_modules/xterm/lib/xterm.js"></script>
    <script src="./term.js"></script>
    <title>Document</title>
</head>

<body>
    <dir style="    margin: 8;padding: 0;">
        <span>Cluster Id: <input name="cluster_id" type="text" value="k8s-test"></span>
        <span>Namespace: <input name="namespace" type="text" value="default"></span>
        <span>Pod Name: <input type="text" name="pod_name" value="mcenter-56d7d5f568-66xkt"></span>
        <span>Container Name: <input type="text" name="container_name" value="mcenter"></span>
        <span>Token: <input type="text" name="token" value="JnOf3ezUweAmjG3ynjxGYtv5"></span>
        <span><button onclick="connect()" id="connect">确认</button></span>
    </dir>
    <div id="terminal" style="height: 95vh;"></div>
    <script>
        var term = new Terminal({
            theme: Solarized_Darcula,
            fontSize: 13,
            convertEol: true,
            disableStdin: false
        });
        term.open(document.getElementById('terminal'));

        // 调整窗口
        const fitSize = () => {
            var geometry = getTermSize(term)
            term.resize(geometry.cols, geometry.rows)
        }
        // 终端大小调整
        window.onresize = fitSize
        const connBtn = document.getElementById("connect")

        const connect = () => {
            const inputs = document.getElementsByTagName("input")
            const cluster_id = inputs['cluster_id'].value
            const namespace = inputs['namespace'].value
            const pod_name = inputs['pod_name'].value
            const container_name = inputs['container_name'].value
            const token = inputs['token'].value
            let socket = new WebSocket(`ws://127.0.0.1:8090/mflow/api/v1/proxy/${cluster_id}/pods/${pod_name}/log?mcenter_access_token=${token}`);
            socket.onopen = function (e) {
                socket.send(JSON.stringify({ namespace, pod_name, container:container_name }));
                fitSize()
            };
            socket.onmessage = function (event) {
                if (event.data instanceof Blob) {
                    // 数据
                    let reader = new FileReader();
                    reader.onload = e => {
                        term.write(e.target.result)
                    };
                    reader.readAsText(event.data)
                } else {
                    // 指令响应
                    console.log(event.data)
                }
            };
            socket.onclose = function (event) {
                console.log(event)
                if (event.wasClean) {
                    term.write(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
                } else {
                    // e.g. server process killed or network down
                    // event.code is usually 1006 in this case
                    term.write(`[close] Connection died, code=${event.code}`);
                }
            };
            socket.onerror = function (error) {
                term.write(`[error]`);
            };
            connBtn.disabled = true
        }

    </script>
</body>

</html>